<template>
    <div class="full">
        <div class="full column start gap15" style="margin-top:40px">
            <div v-if="model!=null" v-for="doc,id in (model? model.ui.mapWidgets: {})"
                class="widget-item" :class="value==doc.id?'active-widget': ''"
                @click="$emit('input', doc.id)">
                {{doc.name}}
            </div>
            
            <div v-show="!model || model.ui.count==0" class="grow column item-center">
                没有创建任何UI组件
            </div>
        </div>
    </div>
</template>

<style scoped>
.widget-item {
    padding: 5px;
}
.active-widget {
    background-color: slategrey;
}
</style>

<script lang="ts" setup>
import { ref, Ref } from 'vue'
import { AppModel } from '../../../model/AppModel';

// const model = ref(null) as unknown as Ref<AppModel>


defineProps<{model:AppModel}>()
</script>